<template>
  <!-- 动态化、配置化表单 -->
  <Form :schema="schema" :model="model" :rules="rules" @submit="handleSubmit">
    <template #sale>
      <el-select>
        <el-option label="颜色" value="111"></el-option>
        <el-option label="大小" value="222"></el-option>
      </el-select>
      <el-button type="primary">添加</el-button>
      <el-table border>
        <el-table-column label="销售属性名"></el-table-column>
        <el-table-column label="销售属性值列表"></el-table-column>
      </el-table>
    </template>
  </Form>
</template>

<script lang="ts">
export default {
  name: "FormTest",
};
</script>

<script lang="ts" setup>
import Form from "@/components/Form/index.vue";
import { reactive } from "vue";
import { ElMessage } from "element-plus";

const schema = reactive([
  {
    label: "sku名称", // 表单项左侧的文字（label）
    type: "input", // 表单项要渲染的组件
    prop: "skuName",
    props: {
      placeholder: "请输入sku名称",
    },
  },
  {
    label: "sku描述",
    type: "input",
    prop: "skuDesc",
    props: {
      type: "textarea",
      rows: 3,
      placeholder: "请输入sku描述",
    },
  },
  {
    label: "sku品牌",
    type: "select",
    prop: "tmId",
    props: {
      placeholder: "请选择sku品牌",
    },
    selectOptions: [
      {
        id: 36754,
        label: "壁纸",
        value: 36754,
      },
      {
        id: 6,
        label: "VIVO",
        value: 6,
      },
    ],
  },
  {
    label: "sku图片",
    type: "upload",
    prop: "skuImageList",
    props: {
      action: "https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15",
      multiple: true,
      limit: 2,
      "on-exceed": () => {
        ElMessage.warning("上传图片数量不能超过2张");
      },
    },
    tip: "上传图片只能是jpg或png格式，大小不能超过100kb",
  },
  {
    label: "销售属性",
    type: "slot",
    slot: "sale",
    prop: "skuSaleAttrList",
  },
]);

const model = reactive({
  skuName: "",
  skuDesc: "",
  tmId: undefined,
  skuImageList: [],
  skuSaleAttrList: [],
});

const rules = reactive({
  skuName: [{ required: true, message: "请输入sku名称", trigger: "blur" }],
  skuDesc: [{ required: true, message: "请输入sku描述", trigger: "blur" }],
  tmId: [{ required: true, message: "请选择sku品牌", trigger: "change" }],
  skuImageList: [
    {
      required: true,
      message: "请输入上传sku图片列表",
      validator: (rule, value, callback) => {
        if (value.length) {
          callback();
        } else {
          callback("请上传图片");
        }
      },
    },
  ],
  skuSaleAttrList: [
    {
      required: true,
      message: "请输入添加sku销售属性",
      validator: (rule, value, callback) => {
        if (value.length) {
          callback();
        } else {
          callback("请输入添加sku销售属性");
        }
      },
    },
  ],
});

const handleSubmit = () => {
  console.log("submit触发了");
};
</script>

<style scoped></style>
